<template>
	<view class="bg" :style="'background-image: url('+WEBCONFIG.bg1+');'">
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar status-bar title="我的" color='#fff' backgroundColor="none" :border='false'></uni-nav-bar>
		<!-- #endif -->
		<view class="p-4 ">
			<view class="flex flex-row flex-x-space-between flex-y-center">
				<view class='flex flex-row flex-y-center'>
					<image class="rounded-circle avatar bg-white"
						:src="USERINFO.avatar==''?WEBCONFIG.default_avatar:USERINFO.avatar">
					</image>
					<view class="ml-4">
						<view class="h8 font-weight-700 text-white">{{USERINFO.nickname}}</view>
						<view class="h9 text-white">ID:{{USERINFO.id}}</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class='flex flex-row flex-y-center' @click='show()'>
					<view class="h9 text-white mr-2">完善资料</view>
					<uni-icons type="right" size='16' color="#fff"></uni-icons>
				</view>
				<!-- #endif -->

				<!-- #ifdef MP-TOUTIAO -->
				<view class='flex flex-row flex-y-center'>
					<view class="h9 text-white mr-2" :data-eventsync="true" @tap='getUserInfo()'>完善资料</view>
					<uni-icons type="right" size='16' color="#fff"></uni-icons>
				</view>
				<!-- #endif -->
			</view>
			<view class="p-4 rounded-3 bg-white mt-6 box-shadow">
				<view class="gradient rounded-3 p-4 flex flex-row flex-y-center">
					<uni-icons type='personadd-filled' size='30' color="#fff"></uni-icons>
					<view class="ml-6 text-white" v-if='USERINFO.is_vip=="1"'>剩余次数:{{USERINFO.points}}</view>
					<view class="ml-6 text-white" v-else>VIP到期时间:{{timestampToDate(USERINFO?.vip_time)}}</view>
				</view>
				<view class="mt-5">
					<uni-grid :column="4" :showBorder="false" :square="false">
						<view v-for='(item,index) in list' :key="index">
							<uni-grid-item class=" mb-4" v-if="item.name=='在线客服'">
								<!-- #ifdef MP-WEIXIN -->
								<button class='btn-normal' open-type='contact' v-if="WEBCONFIG.customer_status=='2'">
									<view class="flex flex-column flex-center flex-1">
										<image class="rounded-circle grid-image" :src='item.url'>
										</image>
										<view class="text-1 h9 mt-1">{{item.name}}</view>
									</view>
								</button>

								<view class="flex flex-column flex-center flex-1" @click="clickItem(item)" v-else>
									<image class="rounded-circle grid-image" :src='item.url'>
									</image>
									<view class="text-1 h9 mt-1">{{item.name}}</view>
								</view>
								<!-- #endif -->

								<!-- #ifdef H5 -->
								<view class="flex flex-column flex-center flex-1" @click="qrcodeShow=true">
									<image class="rounded-circle grid-image" :src='item.url'>
									</image>
									<view class="text-1 h9 mt-1">{{item.name}}</view>
								</view>
								<!-- #endif -->

								<!-- #ifdef MP-TOUTIAO -->
								<button class='btn-normal' open-type="im" :data-im-id="WEBCONFIG.douyin_im_id"
									@error="imErr">
									<view class="flex flex-column flex-center flex-1">
										<image class="rounded-circle grid-image" :src='item.url'>
										</image>
										<view class="text-1 h9 mt-1">{{item.name}}</view>
									</view>
								</button>
								<!-- #endif -->
							</uni-grid-item>

							<uni-grid-item v-else-if="item.name=='在线充值'">

								<!-- #ifdef MP-WEIXIN -->
								<button class='btn-normal' v-if="platform=='ios'&& WEBCONFIG.is_pay=='2'"
									:show-message-card='true' :send-message-path="`/pages/index/index`"
									:send-message-title='`在线充值`' open-type="contact">
									<view class="flex flex-column flex-center flex-1">
										<image class="rounded-circle grid-image" :src='item.url'>
										</image>
										<view class="text-1 h9 mt-1">{{item.name}}</view>
									</view>
								</button>

								<view class="flex flex-column flex-center flex-1"
									v-else-if="platform=='ios'&&WEBCONFIG.is_pay=='3'" @click="qrcodeShow=true">
									<image class="rounded-circle grid-image" :src='item.url'>
									</image>
									<view class="text-1 h9 mt-1">{{item.name}}</view>
								</view>

								<view class="flex flex-column flex-center flex-1" v-else @click="clickItem(item)">
									<image class="rounded-circle grid-image" :src='item.url'>
									</image>
									<view class="text-1 h9 mt-1">{{item.name}}</view>
								</view>
								<!-- #endif -->

								<!-- #ifdef MP-TOUTIAO -->

								<button v-if="platform=='ios'&& (WEBCONFIG.is_pay=='2'||WEBCONFIG.is_pay=='3')"
									class='btn-normal' open-type="im" :data-im-id="WEBCONFIG.douyin_im_id"
									@error="imErr">
									<view class="flex flex-column flex-center flex-1">
										<image class="rounded-circle grid-image" :src='item.url'>
										</image>
										<view class="text-1 h9 mt-1">{{item.name}}</view>
									</view>
								</button>

								<view class="flex flex-column flex-center flex-1" v-else @click="clickItem(item)">
									<image class="rounded-circle grid-image" :src='item.url'>
									</image>
									<view class="text-1 h9 mt-1">{{item.name}}</view>
								</view>

								<!-- #endif -->

								<!-- #ifdef H5 -->
								<view class="flex flex-column flex-center flex-1" @click="clickItem(item)">
									<image class="rounded-circle grid-image" :src='item.url'>
									</image>
									<view class="text-1 h9 mt-1">{{item.name}}</view>
								</view>
								<!-- #endif -->
							</uni-grid-item>

							<uni-grid-item v-else>
								<view class="flex flex-column flex-center flex-1" @click="clickItem(item)">
									<image class="rounded-circle grid-image" :src='item.url'>
									</image>
									<view class="text-1 h9 mt-1">{{item.name}}</view>
								</view>
							</uni-grid-item>

						</view>
					</uni-grid>

				</view>
			</view>
		</view>
		<view class="footer text-center" @click="qrcodeShow=true" v-if='WEBCONFIG.customer_text'>
			<uni-icons type='compose' color="#0476eb" size="16"></uni-icons> {{WEBCONFIG.customer_text}}
		</view>

		<view class="box flex  flex-center" v-if='qrcodeShow'>
			<view class="position-absolute w-65 box-qrcode">
				<view class="position-relative  top-10 flex flex-y-flex-end vw-5" style="left:86%;"
					@click="qrcodeShow=false">
					<uni-icons type='closeempty' size="20" color="#333"></uni-icons>
				</view>
				<view class="bg-white p-5 flex flex-column rounded-6 pt-5">
					<image show-menu-by-longpress :src="WEBCONFIG.customer_qrcode" mode="widthFix" class="w-100 pt-5">
					</image>
					<view class="text-center h8 text-dark-light-1 pb-5">长按二维码添加客服咨询</view>
				</view>
			</view>
		</view>

		<uni-popup ref="showPop">
			<view class="bg-white p-4">
				<view class="mb-3 flex flex-row flex-y-center">
					<image class="logo rounded-circle" :src="WEBCONFIG.web_logo">
					</image>
					<view class="h8 ml-5">{{WEBCONFIG.web_name}}</view>
				</view>
				<view class="h8 font-weight-700 mb-2"> 设置您的昵称头像</view>
				<view class="h9 text-dark-light-4 mb-3">用于展示您的用户信息</view>
				<view class="p-4">
					<view class="line mt-3 mb-3"></view>
					<view class="flex flex-row flex-y-center flex-x-space-between p-4">
						<view class="h9 text-dark-light-1"> 头像</view>
						<button class="btn-normal  flex flex-row flex-y-center" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<view class="flex flex-row flex-y-center">
								<image class="avatar" :src='url' v-if='url'></image>
								<view class=" h9 text-primary-dark-2 mr-2" v-else>点击设置头像</view>
								<uni-icons type="right" size="20" color="#666"></uni-icons>
							</view>
						</button>
					</view>
					<view class="line mt-3 mb-3"></view>
					<view class="flex flex-row flex-y-center flex-x-space-between p-4">
						<view class="h9 text-dark-light-1"> 昵称</view>
						<view class="flex flex-row flex-y-center">
							<input class="h9 mr-2" v-model="nickname" type="nickname" placeholder-style="color:#f30323"
								style="text-align: right;" placeholder="点击设置昵称" />

							<uni-icons type="right" size="20" color="#666"></uni-icons>
						</view>
					</view>
					<view class="line mt-3 mb-3"></view>
				</view>

				<view class="btn text-white flex flex-center p-3" @click="submit">提交</view>
			</view>
		</uni-popup>
		<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
		<!-- #ifdef MP-WEIXIN -->
		<view class="ad mt-9" v-if="WEBCONFIG.weixin_video_status && WEBCONFIG.weixin_video_status == 1">
			<ad :unit-id="WEBCONFIG.weixin_video_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->
		<x-tabbar page="/pages/user/index"></x-tabbar>

	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { useUserStore, useRefs, useWebConfigStore } from "@/stores";
	import { $http, $page } from '@/utils';
	import { onShow, onLoad } from '@dcloudio/uni-app'
	const showPop = ref()
	const nickname = ref()
	const url = ref()
	const qrcodeShow = ref(false)
	onMounted(() => {
		// #ifdef MP-WEIXIN
		if (USERINFO.value.avatar == '') {
			showPop.value.open('bottom')
		}
		// #endif

	})
	onShow(() => {
		getUser()
	})

	onLoad(() => {
		// #ifdef MP-TOUTIAO
		if (WEBCONFIG.value.dy_dealer == '1') {
			list.value = [
				{ name: '卡密兑换', url: '../../static/icon/kamiduihuan.png', path: '', type: "1" },
				{ name: '在线充值', url: '../../static/icon/zaixianchongzhi.png', path: '/pages/package/index', type: "2" },
				{ name: '帮助中心', url: '../../static/icon/bangzhuzhongxin.png', path: '/pages/article/index?name=help', type: '2' },
				{ name: '在线客服', url: '../../static/icon/zaixainkefu.png', path: '', type: '3' },
				{ name: '关于我们', url: '../../static/icon/guanyuwomen.png', path: '/pages/article/index?name=about', type: '2', },
			]
			console.log(list.value)
		}
		// #endif
	})

	const platform = uni.getSystemInfoSync().platform
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);
	//站点信息
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const list = ref([
		{ name: '卡密兑换', url: '../../static/icon/kamiduihuan.png', path: '', type: "1" },
		{ name: '在线充值', url: '../../static/icon/zaixianchongzhi.png', path: '/pages/package/index', type: "2" },
		{ name: '帮助中心', url: '../../static/icon/bangzhuzhongxin.png', path: '/pages/article/index?name=help', type: '2' },
		{ name: '分销中心', url: '../../static/icon/wodetuandui.png', path: '/pages/dealer/index', type: "2" },
		{ name: '在线客服', url: '../../static/icon/zaixainkefu.png', path: '', type: '3' },
		{ name: '关于我们', url: '../../static/icon/guanyuwomen.png', path: '/pages/article/index?name=about', type: '2', },
	])
	const show = (() => {
		url.value = USERINFO.value.avatar
		nickname.value = USERINFO.value.nickname
		showPop.value.open('bottom')
	})
	//点击事件
	const clickItem = ((item : any) => {
		switch (item.type) {
			case "1":
				cdkey()
				break;
			case "2":
				$page.open(item.path)
				break;
			case "3":
				openCustomer()
				break;
		}
	})
	//卡密兑换
	const cdkey = (() => {
		uni.showModal({
			title: '卡密兑换',
			editable: true,
			placeholderText: '请输入卡密',
			success(e) {
				if (e.confirm) {
					$http.post('Cdkey/cdkey', { data: { key: e.content } }).then(res => {
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						})
					})
					getUser()
				}
			}
		})
	})
	//打开客服
	const openCustomer = (() => {
		let webConfig = WEBCONFIG.value
		if (webConfig.customer_status == '2' || webConfig.customer_url == '' || webConfig.customer_corpId == '') {
			uni.showToast({
				title: '系统未配置客服',
				icon: 'none'
			})
			return;
		}
		wx.openCustomerServiceChat({
			extInfo: {
				url: webConfig.customer_url
			},
			corpId: webConfig.customer_corpId, //必须和你小程序上的一致
			success(res : any) {
				console.log(res, 1)
			},
			fail(res : any) {
				console.log(res, 2)
			},
		})
	})
	const submit = (() => {
		if (nickname.value == '') {
			return;
		}
		$http.post('User/save', { data: { field: 'nickname', label: nickname.value } }).then(res => {
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
			showPop.value.close()
			getUser()
		})
	})
	const getUserInfo = () => {
		tt.getUserProfile({
			force: true,
			success(result : any) {
				let data = {
					nickname: result.userInfo.nickName,
					avatar: result.userInfo.avatarUrl
				}
				$http.post('User/saveAll', { data: data }).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					getUser()
				})
			},
			fail(err : any) {
				console.log(err)
			}
		})
	}
	const getUser = (() => {
		$http.get('User/getDeatil').then(res => {
			useUserStore().setUserInfo(res.data)
		})

	})
	const onChooseAvatar = ((e : any) => {
		$http.upload('Upload/upload', { name: 'file', filePath: e.detail.avatarUrl }).then(res1 => {
			url.value = res1.data.url
			$http.post('User/save', { data: { field: 'avatar', label: res1.data.url } }).then(res => {

			})
		})
	})
	const timestampToDate = (timestamp:any) => {
		const date = new Date(timestamp * 1000);
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');

		return `${year}-${month}-${day}`;
	}


	const imErr = (e : any) => {
		if (WEBCONFIG?.douyin_im_id == '') {
			uni.showToast({
				title: '系统未配置客服',
				icon: 'none'
			})
			return;
		}
		uni.showModal({
			title: '温馨提示',
			content: e.detail.errMsg
		})
	}
</script>

<style lang='scss'>
	.bg {
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.gradient {
		background-image: linear-gradient(to right, #fe9d17, #ee2521);
	}

	.grid-image {
		width: 70rpx;
		height: 70rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.text-1 {
		color: #595959;
		;
	}

	.logo {
		height: 100rpx;
		width: 100rpx;
	}

	.line {
		background-color: #eaeaea;
		height: 1px;
		width: 100%;
	}

	.btn {
		border-radius: 40rpx;
		width: 60%;
		margin: 10px auto;
		background-color: #0476eb;
	}

	.footer {
		color: #0476eb;
		font-size: 26rpx;
		font-weight: bold;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		/* 半透明黑色 */
		z-index: 666;

		.box-qrcode {
			left: 17.5%;
			top: 25%;
		}
	}

	.btn-normal {
		display: block;
		margin: 0;
		padding: 0;
		line-height: normal;
		background: none;
		border-radius: 0;
		box-shadow: none;
		border: none;
		font-size: unset;
		text-align: unset;
		overflow: visible;
		color: inherit;
	}

	.btn-normal:after {
		border: none;
	}

	.btn-normal.button-hover {
		color: inherit;
	}

	button:after {
		content: none;
		border: none;
	}
</style>